<template>
    <div class="street-page-bg">
        <div class="street-page" :style="{height:maxNum + 200 + 'px'}">
            <div class="street-bg"></div>
            <div class="street-content" :style="{height:maxNum + 10 + 'px'}">
                <div class="street-img" ref="H" v-for="(item,index) in imgList" :key="index" :style="{left: (index%4)*25+'%'}">
                    <div class="img-one">
                        <img :src="item.imgSrc">
                    </div>
                    <div class="img-p" v-if="item.content">
                        <p>{{ item.content }}</p>
                    </div>
                    <div class="img-two">
                        <img :src="item.touxiang" alt="">
                        <span>{{ item.name }}</span>
                    </div>
                    <div class="img-three">
                        <div>
                            <i class="el-icon-chat-dot-round"></i>
                            <span>{{ item.commentCount }}</span>
                        </div>
                        <div>
                            <i class="el-icon-thumb"></i>
                            <span>{{ item.thumbsCount }}</span>
                        </div>
                        <div>
                            <i class="el-icon-star-on"></i>
                            <span>{{ item.collectionCount }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgList: [{
                    imgSrc: require("../../assets/jp1.jpg"),
                    content: "欧美街拍 模特街拍 streetstyle",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp2.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp3.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp4.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp5.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp6.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp7.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp8.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp9.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp10.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp11.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp12.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp13.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp14.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp15.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp16.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp17.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp18.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp19.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp20.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp21.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp22.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp23.jpg"),
                    content: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    imgSrc: require("../../assets/jp24.jpg"),
                    touxiang: require("../../assets/img.jpg"),
                    name: "ula",
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                }],
                doHeight: 0,
                lastFourArray: [],
                maxNum: 0
            }
        },
        mounted() {
            this.doSort()
        },
        methods: {
            doSort() {
                setTimeout(()=>{
                    for(var i=0; i<this.$refs.H.length; i++) {
                        if(i<4) {
                            this.$refs.H[i].style.top = 0
                        }else {
                            this.$refs.H[i].style.top = this.$refs.H[i-4].clientHeight + 20 + parseInt(this.$refs.H[i-4].style.top) + 'px'
                        }

                        if(i % 4 == 0) {
                            this.lastFourArray.push(parseInt(this.$refs.H[i].offsetHeight) + parseInt(this.$refs.H[i].style.top));
                        }
                        else if(i % 4 == 1) {
                            this.lastFourArray.push(parseInt(this.$refs.H[i].offsetHeight) + parseInt(this.$refs.H[i].style.top));
                        }else if(i % 4 == 2) {
                            this.lastFourArray.push(parseInt(this.$refs.H[i].offsetHeight) + parseInt(this.$refs.H[i].style.top));
                        }else if(i % 4 == 3) {
                            this.lastFourArray.push(parseInt(this.$refs.H[i].offsetHeight) + parseInt(this.$refs.H[i].style.top));
                        }

                        // if(i>this.$refs.H.length-4) {
                        //     // 记录最后一排最大的高度
                        //     this.doHeight = parseInt(this.$refs.H[i].style.top) + parseInt(this.$refs.H[i].clientHeight);
                        //     // console.log(this.doHeight);
                        //     // 把最后四个数存到数组中
                        //     this.lastFourArray.push(this.doHeight);
                        //     // 数组排序
                        //     this.lastFourArray.sort((a,b)=> {
                        //         return a-b;     // 从小到大
                        //     })
                        //     // 把数组里面最大的值赋值给maxNum
                        //     this.maxNum = this.lastFourArray[this.lastFourArray.length-1];
                        // }
                        // console.log(this.maxNum);
                    }
                    // console.log(this.lastFourArray);
                    // 数组排序
                    this.lastFourArray.sort((a,b)=> {
                        return a-b;     // 从小到大
                    })
                    // 把数组里面最大的值赋值给maxNum
                    this.maxNum = this.lastFourArray[this.lastFourArray.length-1];
                },1000)
            }
        }
    }
</script>
<style scoped> 
    .street-page-bg {
        width: 100%;
        overflow: hidden;
        background: #efefec;
    }
    .street-page {
        overflow: hidden;
        /* height: 3400px; */
    }
    .street-bg {
        width: 100%;
        height: 140px;
        background: url("../../assets/jp.jpg") no-repeat center;
    }
    .street-content {
        width: 1100px;
        /* height: 3220px; */
        overflow: hidden;
        margin: 40px auto;
        position: relative;
    }
    .street-img {
        position: absolute;
        width: 23%;
        float: left;
        margin-right: 2%;
        box-shadow: 0px 5px 10px #d6d6d3;
        background: #fff;
        margin-bottom: 20px;
        overflow: hidden;
        /* border: 1px solid red; */
    }
    .img-one {
        width: 100%;
        overflow: hidden;
    }
    .img-one img {
        width: 100%;
    }
    .img-p {
        overflow: hidden;
    }
    .img-p p {
        text-indent: 2em;
        padding: 10px;
        box-sizing: border-box;
        text-align: left;
    }
    .img-two {
        width: 100%;
        height: 60px;
        text-align: left;
        position: relative;
        overflow: hidden;
    }
    .img-two img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .img-two span {
        position: absolute;
        top: 50%;
        left: 60px;
        transform: translateY(-50%);
    }
    .img-three {
        width: 100%;
        overflow: hidden;
    }
    .img-three div {
        width: 20%;
        float: left;
        font-size: 20px;
    }
    .img-three div i {
        cursor: pointer;
    }
</style>